<template>
  <div class="notice">
    <el-table class="el-table-notice zll_tongzhi"
              :data="list"
              :show-header='showHeader'
              style="width: 100%;"
              @row-click="handleClick">
      <el-table-column width="200" :show-overflow-tooltip='overflowTip'>
        <template slot-scope="scope">
          <div :class="[scope.row.readCount == 0? 'no-read':'']">{{ scope.row.title }}</div>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <span class="time_over">{{ scope.row.createTimeFt }}</span>
          <img style="position: absolute;right: 0;top: 10px;" src="../../../assets/img/view.png">
        </template>
      </el-table-column>
     </el-table>

    <message-detail :detailData="detailData"></message-detail>
  </div>
</template>

<script>
  import { getToken } from '@/utils/auth' // 验权
  import messageDetail from './detail';
export default {
  data() {
    return {
      list: [],
      detailData:{},
      showHeader:false,
      overflowTip:true
    }
  },
  components:{
    messageDetail
  },
  mounted() {
    let self = this;
    self.fetchData();
    self.$eventBus.$on("updateNoticeList",function () {
      self.fetchData();
    });
  },
  methods: {
    handleClick(row) {
      if(row.readCount == 0){
        let self = this;
        let user = JSON.parse(getToken());
        self.$http({
          url: "/drug/notice/updateReadStatus",
          method: "post",
          params: {userId:user.id,id:row.id}
        }).then(resp => {
          if (resp.success) {
            row.readCount = 1;
          }
        });
      }
      this.detailData  = Object.assign({},row);
    },
    /**
     * 获取信息列表
     */
    fetchData() {
      let self = this;
      let user = JSON.parse(getToken());
      self.$http({
        url: "/drug/notice/queryNoticeList",
        method: "post",
        params: {userId:user.id,status:"1"}
      }).then(resp => {
        if (resp.success) {
          self.list = resp.result;
          if(self.list.length > 5){
            self.list = self.list.slice(0,5);
          }
        }
      });
    }
  }
}
</script>
<style lang="scss">
.zll_tongzhi {
    &.el-table .cell {
        display: flex;
    }
}
.el-table-notice {
  border: 0;
  th,
  tr,
  td {
    border: 0;
    background-color: #f2f6fc;
    padding: 2px 0;
  }
  &::before {
    height: 0px;
  }
  &::after {
    width: 0;
  }

  .el-table__fixed:before {
    height: 0;
  }

  .el-table__row {
    height: 35px;
    line-height: 35px;
  }
  .el-table__row td {
    border: none;
  }
  .el-table__body td {
    background-color: #f2f6fc;font-size: 12px;
    .time_over {
      height: 26px;
      line-height: 26px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
      width: calc(100% - 40px);
    }
  }
  .el-dialog__body {
    padding: 10px 30px;
    height: 500px;
    overflow: auto;
  }
  .no-read {
    color: #f56c6c;
  }
}
  .notice {
    .el-table .el-table__cell{
      padding: 7px 0px;
    }
  }
</style>
